<template>
  <div class="login">
    <div class="login-title">
      秦皇岛旅游信息平台
    </div>
    <div class="login-card">
      <el-form label-position="right" label-width="80px" :model="userInfo" :rules="rules">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" round @click="login">登录/注册</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      setTimeout(() => {
        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!myreg.test(value)) {
          callback(new Error('请输入合法手机号'));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      userInfo: {  //用户信息
        phone: '',  //手机号
        password: '',  //密码
      },
      rules: {
        phone:[{ validator: checkPhone, required: true, trigger: 'blur'}],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur'}]
      },
      isOk: false, //校验是否通过
    }
  },
  mounted() {

  },
  methods: {

    // 登录
    login() {
      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
      let phoneInput = false
      if (this.userInfo.phone != '' && myreg.test(this.userInfo.phone)) {
        phoneInput = true
      }
      if (this.userInfo.password != '' && phoneInput) {
        this.isOk = true
      }
      if (this.isOk) {
        this.$axios({
          method: 'POST',
          url: '/login',
          data: {
            phone: this.userInfo.phone,
            password: this.userInfo.password
          },
          heads : {
            'content-type' : 'application/x-www-form-urlencoded'
          }
        }).then(res=>{
          if (res.data.result == 1) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.$router.push({
              name: 'Home',
              query: {
                phone:this.userInfo.phone
              }
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(err=>{
          this.$message({
            message: err,
            type: 'error'
          })
        })
      } else {
        this.$message({
          message: '手机号或密码格式不正确',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style scoped>
  .login {
    height: 100vh;
    background: url("../../src/assets/rotation1.jpg");
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .login-title {
    font-size: 5rem;
    color: white;
    margin-top: 5rem;
  }
  .login-card {
    margin-top: 5rem;
    width: 20%;
    padding: 4rem 3rem 2rem 3rem;
    border-radius: 2rem;
    background: rgba(255,255,255,0.8);
  }
</style>
